[PAI-785] fix: custom select auto close on select#7924
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a UX issue where the custom select dropdown component remained open after a user made a selection, implementing auto-close functionality on item selection.
Key Changes
- Modified the onChange handler to automatically close the dropdown after selection
- Added a "rounded" CSS class to improve the visual styling of the select button
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
WalkthroughAdded an optional Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant CS as CustomSelect
participant H as Consumer onChange
U->>CS: select option(value)
CS->>H: onChange(value)
Note right of H: Consumer handles value
H-->>CS: return
alt closeOnSelect === true
CS->>CS: closeDropdown()
Note over CS: Dropdown closes
else closeOnSelect === false
Note over CS: Dropdown remains open
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/ui/src/dropdowns/custom-select.tsx (1)
77-79: Prefercn()utility for consistency.The addition of the "rounded" class improves visual consistency with the non-custom button. However, consider using the
cn()utility (as used in line 90 for the non-custom button) instead of template literal concatenation for better consistency across the codebase.Apply this diff to use the
cn()utility:<Combobox.Button as={React.Fragment}> <button ref={setReferenceElement} type="button" - className={`flex items-center justify-between gap-1 text-xs rounded ${ - disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80" - } ${customButtonClassName}`} + className={cn( + "flex items-center justify-between gap-1 text-xs rounded", + { + "cursor-not-allowed text-custom-text-200": disabled, + "cursor-pointer hover:bg-custom-background-80": !disabled, + }, + customButtonClassName + )} onClick={toggleDropdown} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/ui/src/dropdowns/custom-select.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
packages/ui/src/dropdowns/custom-select.tsx (1)
63-66: Approve: explicit closeDropdown() correctly restores auto-close
Given the use ofstaticanddata-prevent-outside-clickonCombobox.Options, Headless UI’s default close-on-select is intentionally disabled, so callingcloseDropdown()in theonChangehandler is required. Optionally, wrap the providedonChangein a try/catch to avoid closing on error.
Description
Custom select will now auto close on select
Summary by CodeRabbit